<template>
	<div id="home">
		
		<nav-bar class="home-nav">
			<div slot="center">购物街</div>
		</nav-bar>
		
		<tab-control :titles="['流行','新款','精选']"
					 class="tab-control"
					 @tabClick="tabClick"
					 ref="tabControl1"
					 v-show="isTabFixed"></tab-control>
		
		<scroll class="content" 
				ref="scroll" 
				:probe-type="3"
				:pull-up-load="true"
				@scroll="contentScroll"
				@pullingUp="loadMore">
			<home-swiper :banners="banners"
						 @swiperImageLoad="swiperImageLoad"></home-swiper>
			
			<recommend-view :recommends="recommends"></recommend-view>
			
			<feature-view></feature-view>
			
			<tab-control :titles="['流行','新款','精选']"
						 @tabClick="tabClick"
						 ref="tabControl2"></tab-control>
			
			<goods-list :goods="showGoods"></goods-list>
		</scroll>
		
		<back-top @click.native="backClick" v-show="isShowBackTop" />
	</div>
</template>

<script>
	//公共组件
	//导入NavBar.vue组件
	import NavBar from 'components/common/navbar/NavBar.vue'
	//导入控制栏组件  TabControl.vue
	import TabControl from 'components/content/tabControl/TabControl.vue'
	//导入商品展示组件 GoodsList.vue
	import GoodsList from 'components/content/goods/GoodsList.vue'
	
	//子组件
	//导入轮播图组件 HomeSwiper.vue
	import HomeSwiper from './childComps/HomeSwiper.vue'
	//导入推荐信息组件 RecommendView.vue
	import RecommendView from './childComps/RecommendView.vue'
	//导入本周流行组件 FeatureView.vue
	import FeatureView from './childComps/FeatureView.vue'
	//导入滚动组件 Scroll.vue
	import Scroll from 'components/common/scroll/Scroll.vue'
	
	
	//导入网络请求模块 home.js
	import {getHomeMultidata, getHomeGoods} from 'network/home.js'	
	
	//导入itemListenerMixin
	import {itemListenerMixin, backTopMixin} from 'common/mixin.js'
	
	export default {
		name:"Home",
		components: {
			Scroll,
			
			NavBar,
			TabControl,
			GoodsList,
			
			HomeSwiper,
			RecommendView,
			FeatureView
		},
		mixins: [itemListenerMixin, backTopMixin],
		data(){
			return {
				banners: [],
				recommends: [],
				goods: {
					'pop': {page: 0, list: []},
					'new': {page: 0, list: []},
					'sell': {page: 0, list: []}
				},
				currentType: 'pop',
				tabOffsetTop: 0,
				isTabFixed: false,
				saveY: 0
			}
		},
		computed: {
			showGoods(){
				return this.goods[this.currentType].list
			}
		},
		created(){
			
			//1.请求多个数据
			this.getHomeMultidata()
			
			//2.当组件创建后，立即请求流行、新款、精选三个类型的第一页的商品数据
			this.getHomeGoods('pop')
			this.getHomeGoods('new')
			this.getHomeGoods('sell')
			
		},
		mounted(){
			//console.log('home mounted~~~')
		},
		
		/* destroyed(){
			console.log('home destroyed~~~~')
		}, */
		activated(){
			this.$refs.scroll.scrollTo(0, this.saveY, 0)
			this.$refs.scroll.refresh()
		},
		deactivated(){
			//1.保存Y值
			this.saveY = this.$refs.scroll.getScrollY()
			
			//2.取消全局事件的监听
			this.$bus.$off('itemImageLoad', this.itemImgListener)
		},
		
		methods: {
			
			//网络请求相关的方法
			
			getHomeMultidata(){
				//1.请求多个数据
				getHomeMultidata().then(res => {
					//console.log(res)
					this.banners = res.data.data.banner.list
					this.recommends = res.data.data.recommend.list
				})
			},
			getHomeGoods(type){
				//获取要加载的页码
				const page = this.goods[type].page + 1
				//2.请求商品数据
				getHomeGoods(type, page).then(res => {
					//console.log(result.data.data.list)
					
					//解析请求到的数据，而且保存到data变量中
					this.goods[type].list.push(...res.data.data.list) 
					
					//更新页码
					this.goods[type].page += 1
				})
			},
			
			//事件监听相关的方法
			
			//控制栏的点击事件回调函数
			tabClick(index){
				//console.log(index)
				
				switch(index){
					case 0: 
						this.currentType = 'pop'
						break
					case 1:
						this.currentType = 'new'
						break
					case 2:
						this.currentType = 'sell'
						break						
				}
				this.$refs.tabControl1.currentIndex = index
				this.$refs.tabControl2.currentIndex = index
			},

			//Scroll.vue 滚动事件的回调函数
			contentScroll(position){				
				//判断TabControl是否吸顶
				this.isTabFixed = (-position.y) > this.tabOffsetTop
				
				//判断返回按钮是否显示
				this.setShowBackTop(position)
			},
			
			//Scroll.vue组件 上拉加载更多事件 的回调函数
			loadMore(){
				//console.log('上拉加载更多~~~')
				
				this.getHomeGoods(this.currentType)
				
				this.$refs.scroll.finishPullUp()
			},
			
			//轮播图加载完成事件的回调函数
			swiperImageLoad(){
				//console.log(this.$refs.tabControl.$el.offsetTop)
				
				this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
			},	
						
		}
	}
</script>

<style scoped="scoped">
	#home {
		/* padding-top: 44px; */
		height: 100vh;
		position: relative;
	}
	
	.home-nav {
		color: #fff;
		background-color: var(--color-tint);
		
		/* 
		在使用浏览器原生滚动时,为了让导航不跟随一起滚动
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9; */
	}
	
	.content {
		position: absolute;
		top: 44px;
		bottom: 49px;
		left: 0;
		right: 0;
		
		overflow: hidden;
	}
	
	.tab-control {
		position: relative;
		z-index: 9;
	}
	
	/* .content {
		margin-top: 44px;
		height: calc(100% - 93px);
		overflow: hidden;
	} */
</style>
